<template>
	<view class='contain'>
		<view class="contain-list-img">
			<view class="contain-list-box" v-if="couponForm==1">
				<view class="contain-list-box-up">
					<text>满{{satisfyAmount}}减{{discountAmount}}优惠</text>
				</view>
				<view class="contain-list-box-down">
					<text>以下商品均可参加满{{satisfyAmount}}减{{discountAmount}}优惠券活动</text>
				</view>
			</view>
			<view class="contain-list-box" v-if="couponForm==2">
				<view class="contain-list-box-up">
					<text>减{{discountAmount}}优惠</text>
				</view>
				<view class="contain-list-box-down">
					<text>以下商品均可参加减{{discountAmount}}优惠券活动</text>
				</view>
			</view>
		</view>
		<block v-for="(item,index) in goodsList" :key="index">
			<view class="contain-dowm" @click="handleGoods(item)">
				<view class="contain-dowm-img">
					<image :src="item.listImage"></image>
				</view>
				<view class="contain-dowm-text">
					<text>{{item.travelEbusinessGoodsTemp.specification}}</text>
					<view class="contain-dowm-text-down">
						<text>￥</text>
						<text>{{item.travelEbusinessGoodsTemp.specSellingPrice}}</text>
					</view>
				</view>
			</view>
		</block>
		<view class="foot" :class="goodsList.length< 3 ? 'foot-fixed' : ''">
			<footLogo></footLogo>
		</view>
	</view>
</template>

<script>
	import footLogo from "@/components/foot-logo/footLogo.vue";
	export default {
		components:{
			footLogo
		},
		data() {
			return {
				//优惠券ID
				couponId:'',
				//根据优惠券ID获取对应商品数据
				goodsList:[],
				//满足金额
				satisfyAmount:'',
				//优惠金额
				discountAmount:'',
				//(1-全部商品 2-部分商品)
				couponForm:''
			}
		},
		onLoad: function(options) {
				console.log("coptions-------------------->",options)
				this.couponId = options.couponId
				this.satisfyAmount = options.satisfyAmount
				this.discountAmount = options.discountAmount
				this.couponForm = options.couponForm
				//根据优惠券id获取商品列表
				this.getCoupon()
		},
		methods: {
			//根据优惠券id获取商品列表
			getCoupon:function(){
				let params = {
					couponId:this.couponId
				}
				this.$postApi(this.$path.GET_COUPONID_TO_GOODSlIST,params).then(res => {
					console.log("根据优惠券id获取商品列表数据------------>",res.data)
					if(res.data.success){
						
						this.goodsList = res.data.data.list
						
					}else{
						this.pub.showError(res.data.error.errorMessage)
					}
				})
			},
			//去对应商品的商品详情页
			handleGoods: function(item) {
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingdetail?id=' + item.id,
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
		}
	}
</script>

<style lang="scss">
	.contain{
		margin: 0;
		padding: 0;
		width: 100%;
		min-height: 100%;
		font-family:PingFang SC;
		background-color:rgba(255,255,255,1);
		padding: 24upx 12upx 24upx 24upx;
		.contain-list-img{
			height: 174upx;
			background-image: url(../../static/img/discount/zhanshi.png);
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30upx;
			margin-right: 15upx;
		}
		.contain-list-box{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.contain-list-box-up{
			font-size:40upx;
			font-weight:bold;
			color:rgba(255,255,255,1);
		}
		.contain-list-box-down{
			font-size:30upx;
			font-weight:400;
			color:rgba(255,255,255,1);
			margin-top: 4upx;
		}
		.contain-dowm{
			width: 345upx;
			background:rgba(255,255,255,1);
			box-shadow:0upx 7upx 27upx 0upx rgba(0, 0, 0, 0.11);
			border-radius:20upx;
			display: inline-block;
			margin-right: 12upx;
			margin-bottom: 14upx;
		}
		.contain-dowm-img{
			width: 345upx;
			height: 296upx;
			
		}
		.contain-dowm-img image{
			width: 100%;
			height: 100%;
			border-radius:20upx 20upx 0upx 0upx;
		}
		.contain-dowm-text{
			padding: 19upx 22upx 30upx 16upx;
			display: flex;
			flex-direction: column;
		}
		.contain-dowm-text > text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size:34upx;
			font-weight:bold;
			color:rgba(26,26,26,1)
		}
		.contain-dowm-text-down{
			color:rgba(255,94,4,1);
			font-weight:bold;
			margin-top: 39upx;
		}
		.contain-dowm-text-down text:first-child{
			font-size:24upx;
		}
		.contain-dowm-text-down text:last-child{
			font-size:34upx;
		}
		.foot{
			margin-top: 110upx;
			width: 100%;
			padding-right: 12upx;
		}
		.foot-fixed{
			margin-top: 443upx;
			// padding-right: 48upx;
		}
	}
</style>
